<!-- 外部来文 -->
<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="来文单位:">
              <dg-select v-model="condition.lwdw.value" :data="constant.BM_LWDW" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="来文时间:">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="信息状态:">
              <dg-select v-model="condition.xxzt.value" :data="constant.BM_QSZT" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="信息类别:">
                 <dg-tree-drop
                 v-model="xxlb"
                 :code="BM_XXLB"
                 :check-strictly="true"
                 :props="props" lazy-load
                 filterable clearable
                 value-name="value"
                 label-name="label"
                 style="width: 100%"
                 multiple
                 collapse-tags
                 :cacheable="true"
            ></dg-tree-drop>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="关键词:">
              <el-input v-model="condition.keyword.value" placeholder="标题、正文、姓名、身份证号、联系电话" clearable :maxLength="50" />
            </el-form-item>
          </div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
              <!-- <el-button type="primary" size="mini">导出</el-button> -->
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <div class="table">
        <el-button
          type="primary"
          v-permission="['WBLW_ADD']"
          size="mini"
          @click="() => $router.push({ name: 'AddExterCommun' })"
          >新增</el-button
        >
        <comm-table
          :defaultSort="{ prop: 'lwsj', order: 'descending' }"
          ref="table"
          :condition="condition"
          :columns="columns"
          url="/v1/flowMain/search"
        >
          <template slot-scope="{ row }">
            <el-button
              v-permission="['XXXX_EDIT']"
              type="text"
              :disabled="row.xxzt === '1'"
              @click="() => $router.push({ path: `/exter-commun/edit/${row.id}` })">
              编辑
              </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button v-permission="['XXXX_DELETE']" type="text" :disabled="row.xxzt === '1'"  @click="deleteRow(row)">删除</el-button>
            <el-divider direction="vertical" v-permission="['XXXX_PRINT']"></el-divider>
            <el-button type="text" v-permission="['XXXX_PRINT']" @click="openPrintPage(row)">打印</el-button>
          </template>
        </comm-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { deleteProcess, printYaxx } from '@/api/common';
import { deepClone } from '@/utils/common';
import { BM_DEPT,BM_XXLB } from '@/common/codeDic';
export default {
  name: 'ExterCommunHome',
  data() {
    return {
      BM_XXLB,
      xxlb: [],
      // 列表查询条件
      condition: {
        sourceType: {
          value: '0',
          op: '='
        },
        labelType: {
          value: '0',
          op: '='
        },
        lwdw: {
          value: '',
          op: '='
        },
        xxlb_code: {
          value: '',
          op: '='
        },
        xxzt: {
          value: '',
          op: '='
        },
        keyword: {
          value: '',
          op: 'like'
        },
        startTime: {
          value: '',
          op: '='
        },
        endTime: {
          value: '',
          op: '='
        }
      },
      cloneCondition: null,
      time: '',
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        {
          label: '紧急程度',
          render: (h, row) =>
            h('div', { class: `urgentLevel urgentLevel${row.jjcd}` }, [
              h('span', {}, row.jjcd == '1' ? '一级' : row.jjcd == '2' ? '二级' : row.jjcd == '3' ? '三级' : '-') // 判空
            ]),
          width: 120
        },
        { label: '来文时间', prop: 'lwsj', width: 170 },
        {
          label: '信息状态',
          render: (h, row) =>
            h(
              'div',
              { style: { color: row.xxzt === '0' ? '#f5212d' : '#67c23a' } },
              row.xxzt === '0' ? '未签收' : '已签收'
            )
        },
        {
          label: '标题',
          prop: 'title',
          render: (h, row, _i) => {
            const _this = this;
            const tagDeal = (lead) =>
              h(
                'el-tag',
                {
                  attrs: {
                    type: 'danger',
                    effect: 'plain',
                    size: 'mini'
                  }
                },
                `${lead}关注`
              );
            return h(
              'div',
              {
                class: 'table-title yq-list-wrap',
                on: {
                  click() {
                    _this.$router.push({ name: 'ExterCommunDetail', params: { id: row.id } });
                    // _this.$router.push({ path: `/exter-commun/detail/${row.id}?type=exter` });
                  }
                }
              },
              [
                h('span', { class: 'v-link' }, row.title),
                row.isLdgz === '1' && tagDeal('其他领导'),
                row.isJldgz === '1' && tagDeal('局领导')
              ]
            );
          },
          width: 300
        },
        { label: '上报单位', prop: 'sbrdwCode',code:BM_DEPT },
        { label: '上报人', prop: 'sbrName' },
        { label: '操作', type: 'operate', fixed: 'right', width: 180 }
      ],
      props: {
        value: "value"
      },
    };
  },
  watch: {
    time(val) {
      this.condition.startTime.value = val ? val[0] : '';
      this.condition.endTime.value = val ? val[1] : '';
    },
    xxlb(val) {
      this.condition.xxlb_code.value = val.length ? val : '';
    }
  },
  computed: {
    ...mapState(['constant'])
  },
  activated() {
    this.$refs.table.reload();
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_LWDW', 'BM_QSZT']);
    this.$store.dispatch('getConstantTree', ['BM_XXLB']);
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    /**
     * 删除外部来文
     */
    deleteRow({ id }) {
      this.$confirm('确认删除此数据?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        deleteProcess(id)
          .then(() => {
            this.$refs.table.searchForm();
            this.$message.success('删除成功');
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
            this.$message.warning('删除失败');
          });
      });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.condition = { ...deepClone(this.cloneCondition), labelType: this.condition.labelType };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 打印
     */
    openPrintPage(row){
      let doc_name = '公安要情呈报单';
      let doc_id = row.id;
      let type = '1';
      printYaxx(doc_id, doc_name, type);
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 20px;
    button {
      margin-bottom: 10px;
    }
  }
}
</style>
